import React from 'react'
import './index.css'
import Abnormal from "./Components/Abnormal";
import styled from "styled-components"
import Ranking from "./Components/Ranking";

let count = 0

const ChartWrapper = styled.div`
   width: 100%;
   padding: 10px; 
   margin: 20px; 
   background: #fff;
   border: 1px solid #cccccc;
   height:400px;
  `

function Statistic() {

	function callback(key) {
		console.log(key);
	}

	return (
		<div style={{
			width: '1360px',
			height: '850px',
			display: 'grid',
			gridTemplate: '400px 400px/650px 650px',
			// gridTemplate: '800px 800px/850px 650px',
			gridGap: '10px',
			border: '1px solid #cccccccc'
		}}>
			<ChartWrapper>
				<Abnormal channelType={'audio'}/>
			</ChartWrapper>
			<ChartWrapper>
				<Ranking channelType={'audio'}/>
			</ChartWrapper>
			<ChartWrapper>
				<Abnormal channelType={'video'}/>
			</ChartWrapper>
			<ChartWrapper>
				<Ranking channelType={'video'}/>
			</ChartWrapper>

		</div>
	)
}

export default Statistic
